import { ExternalLink, Tag, Globe, Image } from 'lucide-react';
import { Website } from '@/data/config';
import { categories } from '@/data/config';
import { useState } from 'react';

interface WebsiteCardProps {
  website: Website;
  index: number;
}

export default function WebsiteCard({ website, index }: WebsiteCardProps) {
  const [imageLoaded, setImageLoaded] = useState(false);
  const [imageError, setImageError] = useState(false);
  const [iconError, setIconError] = useState(false);

  const getCategoryName = (categoryId: string) => {
    return categories.find(cat => cat.id === categoryId)?.name || categoryId;
  };

  // 获取域名用于图标
  const getDomain = (url: string) => {
    try {
      return new URL(url).hostname;
    } catch {
      return '';
    }
  };

  // 生成缩略图URL
  const getThumbnailUrl = (url: string) => {
    // 使用多个备选服务
    const services = [
      `https://api.screenshotmachine.com/?key=demo&url=${encodeURIComponent(url)}&dimension=1024x768&format=jpg&cacheLimit=0`,
      `https://image.thum.io/get/width/400/crop/600/${encodeURIComponent(url)}`,
      `/placeholder.svg?height=160&width=320&text=${encodeURIComponent(website.name)}`
    ];
    return services[0];
  };

  return (
    <div className="group relative overflow-hidden rounded-2xl bg-white/5 backdrop-blur-md border border-white/10 shadow-2xl hover:shadow-blue-500/20 hover:bg-white/8 transition-all duration-300 hover:-translate-y-2 hover:scale-[1.02]">
      {/* 卡片顶部缩略图区域 */}
      <div className="h-40 relative overflow-hidden bg-slate-800/50">
        {/* 加载状态 */}
        {!imageLoaded && !imageError && (
          <div className="absolute inset-0 flex items-center justify-center bg-slate-800/80">
            <div className="flex flex-col items-center gap-2 text-white/60">
              <div className="w-8 h-8 border-2 border-blue-400/30 border-t-blue-400 rounded-full animate-spin"></div>
              <span className="text-xs">加载预览...</span>
            </div>
          </div>
        )}

        {/* 网站缩略图 */}
        {!imageError && (
          <img
            src={getThumbnailUrl(website.url)}
            alt={`${website.name} 网站预览`}
            className={`w-full h-full object-cover transition-all duration-500 group-hover:scale-110 ${
              imageLoaded ? 'opacity-100' : 'opacity-0'
            }`}
            onLoad={() => setImageLoaded(true)}
            onError={() => {
              setImageError(true);
              setImageLoaded(false);
            }}
          />
        )}
        
        {/* 缩略图加载失败时的备用背景 */}
        {imageError && (
          <div className="absolute inset-0 flex items-center justify-center" style={{ background: website.banner }}>
            <div className="absolute inset-0 bg-gradient-to-b from-white/10 to-black/30" />
            <div className="relative z-10 flex flex-col items-center gap-2 text-white/80">
              <Image className="w-12 h-12" />
              <span className="text-sm font-medium">{website.name}</span>
            </div>
          </div>
        )}
        
        {/* 底部渐变遮罩 */}
        <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent" />
        
        {/* 网站图标和域名 */}
        <div className="absolute top-3 left-3 flex items-center gap-2">
          <div className="w-8 h-8 rounded-lg bg-white/20 backdrop-blur-sm p-1 border border-white/20 flex items-center justify-center">
            <Globe className="w-4 h-4 text-white/80" />
          </div>
          <span className="text-xs text-white/70 bg-black/30 backdrop-blur-sm px-2 py-1 rounded-full">
            {getDomain(website.url)}
          </span>
        </div>
        
        {/* 悬停时的光效 */}
        <div className="absolute inset-0 bg-gradient-to-r from-blue-400/0 via-blue-400/20 to-purple-400/0 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
      </div>

      {/* 卡片内容 */}
      <div className="p-5">
        <div className="flex items-start justify-between mb-3">
          <h3 className="text-lg font-bold text-white group-hover:text-blue-200 transition-colors duration-200 line-clamp-1">
            {website.name}
          </h3>
          <ExternalLink className="w-4 h-4 text-white/60 group-hover:text-blue-300 transition-colors duration-200 flex-shrink-0 ml-2" />
        </div>

        <p className="text-white/75 text-sm leading-relaxed mb-4 line-clamp-3">
          {website.description}
        </p>

        {/* 标签 */}
        <div className="flex flex-wrap gap-2 mb-4">
          {website.category.slice(0, 2).map((cat) => (
            <span
              key={cat}
              className="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium bg-blue-500/20 text-blue-200 border border-blue-400/30"
            >
              <Tag className="w-3 h-3" />
              {getCategoryName(cat)}
            </span>
          ))}
          {website.category.length > 2 && (
            <span className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-white/10 text-white/60 border border-white/20">
              +{website.category.length - 2}
            </span>
          )}
        </div>

        {/* 访问按钮 */}
        <a
          href={website.url}
          target="_blank"
          rel="noopener noreferrer"
          className="block w-full text-center py-2.5 px-4 rounded-xl bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-500 hover:to-purple-500 text-white font-semibold shadow-lg hover:shadow-blue-500/25 transition-all duration-200 hover:scale-[1.02] active:scale-[0.98]"
        >
          访问工具
        </a>
      </div>

      {/* 卡片边框光效 */}
      <div className="absolute inset-0 rounded-2xl bg-gradient-to-r from-blue-500/0 via-blue-500/20 to-purple-500/0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none" />
    </div>
  );
}